 
<template>
	<view class="his_rep_detail">
		<!-- 下方数据详情 -->
		<view class="mea_details"> 
			
			<div class='report_div'>
				<table class='report_info' border   :style='{width: thWidth}'>
					<tr>
						<th colspan='2'>
							时间
						</th>
						<th v-for='(item,index) in reportInfo.title_data' :key='index'>{{item}}</th>
					</tr>
					
					<tr>
						<td>起</td>
						<td>止</td>
						<td v-for='(item,index) in reportInfo.unit_data' :key='index'>{{item}}</td>
					</tr> 
					
					<tr>
						<td>08:00</td> 
						<td>12:00</td>
						<td v-for='(item,index) in reportInfo.the_three_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>12:00</td>
						<td>16:00</td>
						<td v-for='(item,index) in reportInfo.the_four_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>16:00</td>
						<td>20:00</td>
						<td v-for='(item,index) in reportInfo.the_five_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td colspan='2'>小计</td> 
						<td v-for='(item,index) in reportInfo.the_six_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>20:00</td>
						<td>24:00</td> 
						<td v-for='(item,index) in this.reportInfo.the_seventh_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>00:00</td>
						<td>04:00</td> 
						<td v-for='(item,index) in this.reportInfo.the_eighth_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td>04:00</td>
						<td>08:00</td>
						<td v-for='(item,index) in this.reportInfo.the_nine_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td colspan='2'>小计</td> 
						<td v-for='(item,index) in reportInfo.the_ten_line' :key='index'>{{item}}</td>
					</tr> 
					<tr>
						<td colspan='2'>日总计</td> 
						<td v-for='(item,index) in reportInfo.the_eleven_line' :key='index'>{{item}}</td>
					</tr> 
				</table>
			</div> 
		</view>
	</view>
</template>

<script> 
	export default { 
		data() {
			return {
				// 事件区间选择高亮
				showTimeSele: 1,
				// 参数名称
				objectName: '',
				width: 300,
				thWidth: '',
				currentId: '',
				reportList: [], 
				reportInfo: {},
				// 白天数据
				repDay: [],
				// 白天小计
				daySubtotal:[],
				// 晚上数据
				nightInfo:[],
				// 晚上小计
				nightSubtotal:'',
				// 总计
				dailyTotal:'',
				 // 顶部
				titleDataList:[
					'累计液量(t)',
					'油量',
					'含水量',
					'含水质量比',
					'累计气量',
				]
			};
		},
		onLoad(option) { 
			this.currentId = option.report_id 
		},
		mounted() { 
			this.getreportInfo(this.currentId)
		},
		methods: {
			// 时间高亮
			btnTime(index) {
				this.showTimeSele = index
			}, 
			// 获取设备详情
			getreportInfo(id) {
				this.$http({
					url: '/wxapi/parameter_list_api/report_form_info',
					method: 'POST',
					data: {
						id
					}
				}).then(res => {  
					if (res.code == 200) {
						this.reportInfo = res.data    
					}
				})
			}, 
		}
	}
</script>

<style lang="less">
	.his_rep_detail {
		.time_sele {
			display: flex;
			justify-content: space-around;
			height: 100rpx;
			background-color: #f3f5f8;

			text {
				flex: 1;
				margin: 30rpx 20rpx;
				height: 50rpx;
				text-align: center;
				border-radius: 25rpx;
				background-color: #fff;
			}
		}

		.time_seles {
			background-color: #2596FF !important;
			color: #fff;
		}

		.mea_details {
			padding: 20rpx 0;

			table {
				text-align: center;
				width: 100%;
				border: none;
			}

			.report_div {
				width: 100%;
				overflow-y: scroll;

				.report_info {
					tr {
						& td:nth-child(1),
						& td:nth-child(2) {
						}

						th,
						td {
							padding-top: 20rpx;
							min-height: 70rpx;
						}
					}
					
				}
			}
		}
		.generate_data{
			padding: 0 20rpx;
			margin: 40rpx auto;
			width: 100rpx;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 24rpx;
			border: 1px solid #eee;
			border-radius: 10rpx;
		}
		 
	}
	image{
		width: 100%;
	}
</style>

